<template>
    <div class="chart">
        <!-- <div class="top">
            <div class="left">
                <div class="left-top">
                    <p style="font-size: 12px;">本月累计收益（万元）</p>
                    <p style="font-size: 24px; margin-top: 6px;">¥ 284,348.43</p>
                </div>
                <ul>
                    <li>
                        <div class="shou">
                            今日新增收益
                        </div>
                        <div class="price"><span style="font-size: 20px; color: #000;"> 952.92 </span><span>万元</span>
                        </div>
                    </li>
                    <li>
                        <div class="shou" style="border-left: 6px solid #e6a23c;">
                            今日新增支出
                        </div>
                        <div class="price"><span style="font-size: 20px; color: #000;"> 831.52 </span><span>万元</span>
                        </div>
                    </li>
                    <li>
                        <div class="shou" style="border-left: 6px solid #67c23a;">
                            今日结余
                        </div>
                        <div class="price"><span style="font-size: 20px; color: #000;"> 121.40 </span><span>万元</span>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="right">
                <div id="Columnar"></div>
            </div>
        </div> -->
        <!-- <HelloWorld></HelloWorld> -->
        <!-- <div class="header">
            <div class="left">
                <div id="main"></div>
            </div>
            <div class="right">
                <div id="cake"></div>
            </div>
        </div>
        <div class="body">
            
        </div>
        <div class="bottom"></div>
        <div id="Words"></div> -->
        223
    </div>
</template>


<script setup>
import { ref, reactive, toRefs, onMounted } from "vue"
// import * as echarts from 'echarts';
// import { trend } from '@/http/api'
// import HelloWorld from '../components/HelloWorld.vue';
// const gettrend = () => {
//     let res = trend()
//     console.log(123,res);
// }
console.log(852);
onMounted(() => {
    console.log(111);
    // gettrend()
    // let chartDom3, myChart3;
    // chartDom3 = document.getElementById('Columnar');
    // myChart3 = echarts.init(chartDom3);
    // option3 && myChart3.setOption(option3);
})

// let option3;
// // 动态柱状图数据----------------------------------------------------------------------------------------------------------
// const categories = (function () {
//     let now = new Date();
//     let res = [];
//     let len = 10;
//     while (len--) {
//         res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
//         now = new Date(+now - 2000);
//     }
//     return res;
// })();
// const categories2 = (function () {
//     let res = [];
//     let len = 10;
//     while (len--) {
//         res.push(10 - len - 1);
//     }
//     return res;
// })();
// const data = (function () {
//     let res = [];
//     let len = 10;
//     while (len--) {
//         res.push(Math.round(Math.random() * 1000));
//     }
//     return res;
// })();
// const data2 = (function () {
//     let res = [];
//     let len = 0;
//     while (len < 10) {
//         res.push(+(Math.random() * 10 + 5).toFixed(1));
//         len++;
//     }
//     return res;
// })();
// option3 = {
//     tooltip: {
//         trigger: 'axis',
//         axisPointer: {
//             type: 'cross',
//             label: {
//                 backgroundColor: '#283b56'
//             }
//         }
//     },
//     legend: {},
//     toolbox: {
//         show: true,
//         feature: {
//             dataView: { readOnly: false },
//             restore: {},
//             saveAsImage: {}
//         }
//     },
//     dataZoom: {
//         show: false,
//         start: 0,
//         end: 100
//     },
//     xAxis: [
//         {
//             type: 'category',
//             boundaryGap: true,
//             data: categories
//         },
//         {
//             type: 'category',
//             boundaryGap: true,
//             data: categories2
//         }
//     ],
//     yAxis: [
//         {
//             type: 'value',
//             scale: true,
//             name: 'Price',
//             max: 30,
//             min: 0,
//             boundaryGap: [0.2, 0.2]
//         },
//         {
//             type: 'value',
//             scale: true,
//             name: 'Order',
//             max: 1200,
//             min: 0,
//             boundaryGap: [0.2, 0.2]
//         }
//     ],
//     series: [
//         {
//             name: '月累计收益',
//             type: 'bar',
//             xAxisIndex: 1,
//             yAxisIndex: 1,
//             data: data
//         },
//         {
//             name: '日收益曲线',
//             type: 'line',
//             data: data2
//         }
//     ]
// };
// app.count = 11;
// setInterval(function () {
//     let axisData = new Date().toLocaleTimeString().replace(/^\D*/, '');
//     data.shift();
//     data.push(Math.round(Math.random() * 1000));
//     data2.shift();
//     data2.push(+(Math.random() * 10 + 5).toFixed(1));
//     categories.shift();
//     categories.push(axisData);
//     categories2.shift();
//     categories2.push(app.count++);
//     myChart3.setOption({
//         xAxis: [
//             {
//                 data: categories
//             },
//             {
//                 data: categories2
//             }
//         ],
//         series: [
//             {
//                 data: data
//             },
//             {
//                 data: data2
//             }
//         ]
//     });
// }, 2100);
// --------------------------------------------------------------------------------------------------------------------------



</script>


<style lang="scss" scoped>
// .chart {
//     width: 100%;
//     height: 100%;
//     padding: 20px;
//     box-sizing: border-box;

//     .top {
//         width: 100%;
//         height: 280px;
//         display: flex;
//         border-radius: 3px;
//         box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);

//         .left {
//             width: 380px;
//             padding: 20px;

//             .left-top {
//                 color: #fff;
//                 height: 70px;
//                 background-image: linear-gradient(to right, #0ea5e9, #6366f1);
//                 padding: 10px 20px;
//                 box-sizing: border-box;
//                 border-radius: 5px;
//             }

//             ul {
//                 width: 100%;

//                 li {
//                     width: 100%;
//                     height: 57px;
//                     display: flex;
//                     justify-content: space-between;
//                     align-items: center;
//                     border-bottom: 1px solid #c9c9c9;
//                     padding: 16px 0;
//                     box-sizing: border-box;
//                     color: #666;
//                     font-size: 12px;

//                     div {
//                         height: 24px;
//                         line-height: 24px;
//                     }

//                     .shou {
//                         border-left: 6px solid #409eff;
//                         padding-left: 10px;
//                     }

//                     .price {
//                         text-align: right;
//                     }
//                 }
//             }
//         }

//         .right {
//             flex: 1;
//         }
//     }
//     #Columnar {
//         width: 100%;
//         height: 100%;
//     }

//     div {
//         width: 100%;
//         box-shadow: 0 1 10px #ccc;
//     }
// }
</style>